<template>
	<div>
		<!-- 列表 -->
		<yd-table
			:formData="formData"
			:tableConfig="tableConfig"
			:tableData="tableData"
			@sizeChangeHandler="handleSearch"
			@currentChangeHandler="handleSearch"
			@sortChangeHandler="handleSearch"
			@selectionChangeHandler="handleSelectionChange"
		></yd-table>

		<!-- 时间段配置 -->
		<el-dialog v-model="exDialog.period.open" :title="exDialog.period.title" width="1000px" append-to-body center>
			<ConfAlarmPeriod :currentAlarmId="currentAlarmId" @handleClosePeriodDialog="exDialog.period.open = false"></ConfAlarmPeriod>
		</el-dialog>
	</div>
</template>

<script lang="tsx">
import Curd from '@/views/management/middle-platform/curd';
import { page, updateById } from '@/api/middle-platform/conf-alarm';
import { alarmLevelOptions } from '@/views/management/middle-platform/select-option';
import ConfAlarmPeriod from './period.vue';

export default {
	name: 'ConfAlarm',
	components: {
		ConfAlarmPeriod,
	},
	mixins: [Curd],
	props: {
		currentServiceId: {
			type: Number,
			default: 0,
		},
		alarmObj: {
			type: Object,
			default: {},
		},
	},
	data() {
		return {
			exDialog: {
				period: {
					open: false,
					title: '时间段配置',
				},
			},
			// 当前告警id
			currentAlarmId: undefined,
			// 接口
			api: {
				query: page,
				edit: updateById,
			},
			// 下拉选项
			options: {
				alarmLevel: {},
			},
			// 搜索表单
			formData: {},
			tableConfig: {
				columns: [
					{
						label: '是否启用',
						prop: 'isEnable',
						renderXss: (row: any, val: any) => {
							return (
								<el-switch
									v-model={row.isEnable}
									activeValue={1}
									inactiveValue={0}
									inline-prompt
									activeText={'是'}
									inactiveText={'否'}
									onChange={() => this.handleEnableChange(row)}
								></el-switch>
							);
						},
					},
					{
						label: '告警指标',
						prop: 'alarmName',
					},
					{
						label: '告警规则',
						prop: 'alarmCode',
						width: 400,
						renderXss: (row: any, val: any) => {
							switch (row.alarmCode) {
								// 系统级成功率
								case 'SYSTEM_SUCCESS_RATE':
									row.threshold = parseFloat(row.threshold);
									return (
										<span>
											系统级成功率低于
											<el-input-number
												v-model={row.threshold}
												min={0}
												max={100}
												step={1}
												precision={2}
												onChange={() => this.handleThresholdChange(row)}
											/>
											(%)，产生告警
										</span>
									);
								// 平均响应耗时
								case 'AVG_RESPONSE_TIME':
									row.threshold = parseInt(row.threshold);
									return (
										<span>
											平均响应耗时大于
											<el-input-number
												v-model={row.threshold}
												min={0}
												max={99999}
												step={1}
												precision={0}
												onChange={() => this.handleThresholdChange(row)}
											/>
											(毫秒)，产生告警
										</span>
									);
								// 超时次数
								case 'TIMEOUT_COUNT':
									row.threshold = parseInt(row.threshold);
									return (
										<span>
											超时次数大于
											<el-input-number
												v-model={row.threshold}
												min={0}
												max={99999}
												step={1}
												precision={0}
												onChange={() => this.handleThresholdChange(row)}
											/>
											(次)，产生告警
										</span>
									);
								// 业务级成功率
								case 'BUSINESS_SUCCESS_RATE':
									row.threshold = parseFloat(row.threshold);
									return (
										<span>
											业务级成功率低于
											<el-input-number
												v-model={row.threshold}
												min={0}
												max={100}
												step={1}
												precision={2}
												onChange={() => this.handleThresholdChange(row)}
											/>
											(%)，产生告警
										</span>
									);
								// 中断耗时
								case 'INTERRUPT_TIME':
									row.threshold = parseInt(row.threshold);
									return (
										<span>
											中断耗时大于
											<el-input-number
												v-model={row.threshold}
												min={0}
												max={99999}
												step={1}
												precision={0}
												onChange={() => this.handleThresholdChange(row)}
											/>
											(分钟)，产生告警
										</span>
									);
								// 登录成功率
								case 'LOGIN_SUCCESS_RATE':
									row.threshold = parseFloat(row.threshold);
									return (
										<span>
											登录成功率低于
											<el-input-number
												v-model={row.threshold}
												min={0}
												max={100}
												step={1}
												precision={2}
												onChange={() => this.handleThresholdChange(row)}
											/>
											(%)，产生告警
										</span>
									);
							}
						},
					},
					{
						label: '告警等级',
						prop: 'levelId',
						renderXss: (row: any, val: any) => {
							return (
								<el-select v-model={row.levelId} filterable placeholder={'请选择告警等级'} onChange={() => this.handleLevelChange(row)}>
									<el-option label={'提示'} value={'1'}></el-option>
									<el-option label={'一般'} value={'2'}></el-option>
									<el-option label={'紧急'} value={'3'}></el-option>
									<el-option label={'重大'} value={'4'}></el-option>
								</el-select>
							);
						},
					},
					{
						label: '操作',
						prop: '',
						operation: [
							{
								text: '时间段配置',
								handler: (scope: any) => {
									this.currentAlarmId = scope.row.id;
									this.exDialog.period.open = true;
								},
							},
						],
					},
				],
				// 加载层
				loading: false,
				// 启用复选框
				enableSelection: false,
			},
			tableData: [],
		};
	},
	watch: {
		currentServiceId: {
			handler(newVal, oldVal) {
				console.log(newVal, oldVal, 'newValnewValnewValnewVal');

				this.formData = {
					pageNum: 1,
					pageSize: 100,
					serviceId: newVal,
				};
				this.handleSearch(null);
			},
			deep: true,
			immediate: true,
		},
	},
	created() {
		// 告警等级
		alarmLevelOptions().then((data: any) => {
			this.options.alarmLevel = data.reduce((obj: any, item: any) => ((obj[item.value] = item.label), obj), {});
		});
	},
	methods: {
		handleEnableChange(row: object) {
			updateById({ id: row.id, isEnable: row.isEnable }).then((res) => {
				if (res.code !== 0) {
					this.$message.error(res.msg);
					return;
				}
				this.tableData.filter((d) => d.id === row.id)[0].isEnable = row.isEnable;
				this.$message.success('修改成功');
			});
		},
		handleLevelChange(row: object) {
			updateById({ id: row.id, levelId: row.levelId }).then((res) => {
				if (res.code !== 0) {
					this.$message.error(res.msg);
					return;
				}
				this.tableData.filter((d) => d.id === row.id)[0].levelId = row.levelId;
				this.$message.success('修改成功');
			});
		},
		handleThresholdChange(row: object) {
			updateById({ id: row.id, threshold: row.threshold === null ? 0 : row.threshold }).then((res) => {
				if (res.code !== 0) {
					this.$message.error(res.msg);
					return;
				}
				this.tableData.filter((d) => d.id === row.id)[0].threshold = row.threshold;
				this.$message.success('修改成功');
			});
		},
	},
};
</script>

<style scoped></style>
